<template>
  <view :class="['p-ask',{'is-new-template': isNewTemplate}]" @click="navigateTo">
    <view class="title-box">
      <view class="title">问大家（{{ total }}）</view>
      <x-icon name="icon-017" color="#323232" :size="30" />
    </view>

    <view class="content">
      <view class="li" v-for="item in list" :key="item.id">
        <view class="question">
          <view class="icon">问</view>
          <view class="text">{{ item.questionContent }}</view>
        </view>
        <view class="num">
          {{ item.answerList ? item.answerList.length : 0 }}个回答
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import XIcon from '@/components/x-icon';
export default {
  name: 'PAsk',
  components: {
    XIcon
  },
  props: {
    productId: {
      type: String,
      default: ''
    },
    productName: {
      type: String,
      default: ''
    },
    productPic: {
      type: String,
      default: ''
    },
    isNewTemplate: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      total: 0,
      list: []
    };
  },
  mounted() {
    this.getList();
    this.getFakeCommentCount();
  },
  methods: {
    async getList() {
      const { data, pageInfo } = await this.$http({
        url: '/product/qa/app/question/list',
        method: 'get',
        report: false,
        data: {
          productId: this.productId,
          pageSize: 2
        }
      });
      this.list = data || [];
      // this.total = pageInfo?.total || 0;
    },
    // 获取假的评论数量
    getFakeCommentCount() {
      const params = {
        productId: this.productId
      };
      this.$http({
        url: '/product/qa/app/comment/count',
        method: 'get',
        error: false,
        report: false,
        data: params
      }).then(res => {
        this.total = res.data.questionCount || 0;
      });
    },
    navigateTo() {
      uni.navigateTo({
        url: `/packages/ask/list/index?productId=${this.productId}&productName=${this.productName}&productPic=${this.productPic}`
      });
    }
  }
};
</script>

<style scoped lang="scss">
.p-ask{
  background: #FFFFFF;
  margin: 16px 0 0;

  &.is-new-template{
    border-radius: 20px;
    margin: 16px var(--padding);
    background: #F8F8F8;
  }
}
.title-box{
  padding: 30px 20px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid $uni-bg-color-grey;

  .title{
    font-size: 34px;
    font-weight: 500;
  }
}

.content{
  padding: 30px 20px 20px;
  .li{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
   .question{
     display: flex;
     align-items: center;
     font-size: 30px;
     .icon{
       background: linear-gradient(180deg, #FF9F45 0%, #FC6821 100%);
       background-clip: text;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       margin-right: 16px;
     }
     .text{
       -webkit-line-clamp: 1;
       display: -webkit-box;
       -webkit-box-orient: vertical;
       overflow: hidden;
       text-overflow: ellipsis;
     }
   }
    .num{
      margin-left: 20px;
      flex: none;
      font-size: 26px;
      color: #999999;
    }
  }
}
</style>
